<template>
    <div class="myReportForm">
        <!-- 头部饼图 -->
        <div class="headerBox">
            <div>
                <div>
                    <img src="@/assets/images/img2.png" alt="">
                </div>
                <div>
                    <div>{{info.num}}件</div>
                    <div style="color:#AEAEB2 ">领用数量 <i class="el-icon-warning" > </i></div>
                </div>
            </div>
             <div>
                <div>
                    <img src="@/assets/images/img1.png" alt="">
                </div>
                <div>
                    <div style="color:#FF3A30">{{info.price}}元</div>
                    <div style="color:#AEAEB2 ">耗材价值 <i class="el-icon-warning" > </i></div>
                </div>
            </div>
        </div>
        <!-- 部门耗材月统计 -->
        <div class="onePart">
            <div id="mechartsOfClass"></div>
              <div class="shouwMoare">
                    <el-date-picker style="width:136px" @change='getMonth()' v-model="form.month" value-format='yyyy-MM' type="month" :clearable='false' placeholder="选择月"></el-date-picker>
              </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
import moment from 'moment'
import {getUserConsumable,getUserMonthCount} from '../api'
export default {
    name:"myReportForm",
    // props:['dept'],
    data(){
        return {
            info:{num:'',price:''},
            form:{
                month:new Date(),
            },
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        /**头部bin */
        getReportformFn(){
            getUserConsumable().then(res=>{
                this.info = {num:res[0].status,price:res[1].status}
            })
        },
        /*底下柱形 */
        getMonth(label){
            getUserMonthCount({dept_id:this.dept_id,month:moment(this.form.month).format('YYYY-MM')}).then(res=>{
                let obj = {
                    label:'我领用的耗材数据',
                    subtext:'',
                    name:['领用耗材数量','领用耗材价值'],
                    xAxisName:'day',
                    xAxisAdd:'日',
                    bottom:60,
                }
                this.setBar('mechartsOfClass',res,obj)
            });
        },
        /**设置柱状图 */
        setBar(obj,data,subfix){
           let maxSpan = Math.floor((window.innerWidth-320)/40)
           let option = {
               dataZoom: {
                    show:data.length>maxSpan, // 为true 滚动条出现
                    realtime: true,  
                    type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
                    height: 20, // 表示滚动条的高度，也就是粗细
                    maxValueSpan:maxSpan,
                },
                color: ['#00BB7A', '#FF9502',],
                title: {
                    text: [
                        `{a|${subfix.label}}{b|${subfix.subtext}}`
                    ],
                    left:'37px',
                    textStyle:{
                        rich: {
                            a: {
                                lineHeight: 24,
                                color: 'rgba(16, 16, 16, 1)',
                                fontSize: 16,
                                fontWeight:600,
                            },
                            b: {
                                color: '#939393',
                                fontSize: 10,
                            },
                        }
                        
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: ''
                        // type: 'shadow'
                    },
                    formatter:'{a0}: {c0}件<br />{a1}: {c1}元'
                },
                legend: {
                    data:subfix.name,
                    top:subfix.top,
                    right:subfix.right||185,
                    textStyle:{
                        fontSize:14,
                        color:'rgba(70, 70, 70, 1)',
                    },
                },
                grid: {
                    left: '3%',
                    top:'25%',
                    right:'5%',
                    bottom:subfix.bottom||85,
                    show:false,
                    containLabel:false,
                },
                yAxis:[
                    {
                        type: 'value',
                        name: '数量',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                        
                    },
                    {
                        type: 'value',
                        name: '价值',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false
                        },
                        axisTick:{//坐标轴刻度的设置
                            show:false
                        }
                    },
                ],
                xAxis : {
                    type: 'category',
                    axisTick: {
                        show: false,
                        interval:0,
                    },
                    data:data&&data.length?data.map(item=>{
                        return item[subfix.xAxisName]+subfix.xAxisAdd
                    }):[]
                },
                series: [
                    {
                        name: subfix.name[0],
                        type: 'bar',
                        barWidth:10,
                        barGap: 40,
                        data: data&&data.length?data.map(item=>{
                            return item.re_num
                        }):[]
                    },
                    {
                        name: subfix.name[1],
                        type: 'bar',
                        barGap: 0,
                        barWidth:10,
                        yAxisIndex: 1,
                        data: data&&data.length?data.map(item=>{
                            return  Number(item.re_price)
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById(obj))
                echarts.setOption(option);
            })
        },
        /*获取所有数据 */
        getData(){
            this.getReportformFn()
            this.getMonth()
        },
    }
}
</script>

<style lang='stylus'>
.myReportForm
    .headerBox 
        background #fff 
        padding 25px 35px 
        margin 10px 0
        >div:first-child 
            padding-right 100px
            margin-right 48px 
            border-right 1px solid rgba(187, 187, 187, 1);
        >div 
            display inline-block
            >div
                display inline-block
            >div:first-child
                padding 7px
                margin-right 20px
                >img 
                    width 45px
                    height 45px
            >div:last-child 
                >div:first-child 
                    line-height : 20px;
                    font-weight 600
                    color: rgba(0, 122, 255, 1);
                    font-size: 20px;
                    margin-bottom 10px
                >div:last-child 
                    line-height : 25px;
                    color: rgba(174, 174, 178, 1);
                    font-size: 18px;
    .onePart
        height 360px
        width 100%
        position relative
        background-color #fff
        margin-bottom 10px
        >div:first-child 
            height 100%
            width 100%
            padding-top 25px
    
    .classPart
        padding 20px 37px 40px 37px
        background-color #fff
        margin-bottom 10px
        .first
            display flex
            justify-content space-between
            padding-bottom 12px
            position relative
            border-bottom 1px solid rgba(240, 240, 240, 1);
            align-items center
            >span:first-child  
                font-weight 600
                color: rgba(16, 16, 16, 1);
                font-size: 18px;
            >span>span>:first-child  
                font-weight 600
                color: rgba(16, 16, 16, 1);
                font-size: 18px;
            >div>span>span:first-child 
                display inline-block 
                width 10px
                height 10px
                border-radius 50%
                margin-right 5px
            >div>span:first-child
                margin-right 5px 
                >span:first-child
                    background-color #34C758 
            >div>span:last-child
                margin-right 43px
                >span:first-child
                    background-color #FF9502 
            
        .item 
            width 127px
            margin 30px 12px 0 0
            display inline-block
            >div:first-child 
                width 80px
                height 80px
            >div:last-child 
                color: rgba(89, 89, 89, 1);
                font-size: 12px;
                width 80px
                margin-top 7px
                text-align: center;
    .shouwMoare
        position absolute 
        top 20px
        right 34px 
        display flex 
        align-items center
        >div:first-child
            color: rgba(16, 16, 16, 1);
            font-size: 14px;

</style>